<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--引入核心标签库--%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>

    <title>员工显示页面</title>
    <%
        pageContext.setAttribute("APP_PATH", request.getContextPath());
    %>
    <%--    web工程里相对路径问题：在客户端/ 代表：http://localhost:8080/
            在服务器端：/代表：http://localhost:8080/工程名
            --%>
    <%--引入boostrap的js和jQuery--%>
    <script src="${APP_PATH}/static/js/jquery-3.1.1.js"></script>
    <script src="${APP_PATH}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <%--  引入bootstrap的css  --%>
    <link href="${APP_PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<%--编辑模态框--%>
<div class="modal fade" id="emp_update_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">员工编辑信息</h4>
            </div>
            <div class="modal-body">
                <%--      编辑员工的表单          --%>
                <form class="form-horizontal">
                    <%--        empName            --%>
                    <div class="form-group">
                        <label for="empName" class="col-sm-2 control-label">员工名</label>
                        <div class="col-sm-10">
                            <p class="form-control-static" id="empName_update_name"></p>
                            <span id="emp_update_Name_Msg" class="help-block"></span>
                        </div>
                    </div>
                    <%--       emial          --%>
                    <div class="form-group">
                        <label for="email" class="col-sm-2 control-label">email</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="emp_update_email" name="email">
                            <span id="emp_Email_Msg" class="help-block"></span>
                        </div>
                    </div>
                    <%--       gender          --%>
                    <div class="form-group">
                        <label for="male" class="col-sm-2 control-label">性别</label>
                        <div class="col-md-10">
                            <label class="radio-inline">
                                <input type="radio" name="gender" id="update_male" value="M" checked="checked"> 男
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="gender" id="update_female" value="F"> 女
                            </label>
                        </div>
                    </div>
                    <%--       department          --%>
                    <div class="form-group">
                        <label for="department" class="col-sm-2 control-label">部门信息</label>
                        <div class="col-md-4">
                            <select class="form-control" id="update_department" name="dId">
                            </select>
                        </div>

                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="emp_update_btn">更新</button>
            </div>
        </div>
    </div>
</div>
<!-- 添加员工的模态框 -->
<div class="modal fade" id="emp_add_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">员工添加信息</h4>
            </div>
            <div class="modal-body">
                <%--      添加员工的表单          --%>
                <form class="form-horizontal">
                    <%--        empName            --%>
                    <div class="form-group">
                        <label for="empName" class="col-sm-2 control-label">员工名</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="empName" name="empName">
                            <span id="empNameMsg" class="help-block"></span>
                        </div>
                    </div>
                    <%--       emial          --%>
                    <div class="form-group">
                        <label for="email" class="col-sm-2 control-label">email</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="email" name="email">
                            <span id="empEmailMsg" class="help-block"></span>
                        </div>
                    </div>
                    <%--       gender          --%>
                    <div class="form-group">
                        <label for="male" class="col-sm-2 control-label">性别</label>
                        <div class="col-md-10">
                            <label class="radio-inline">
                                <input type="radio" name="gender" id="male" value="M" checked="checked"> 男
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="gender" id="female" value="F"> 女
                            </label>
                        </div>
                    </div>
                    <%--       department          --%>
                    <div class="form-group">
                        <label for="department" class="col-sm-2 control-label">部门信息</label>
                        <div class="col-md-4">
                            <select class="form-control" id="department" name="dId">
                            </select>
                        </div>

                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="emp_save_btn">保存</button>
            </div>
        </div>
    </div>
</div>
<div class="container">
    <%--    标题--%>
    <div class="row">
        <div class="col-md-12 col-md-offset-5">
            <h1>员工CRUD</h1>
        </div>
    </div>
    <%--    删除和添加按钮--%>
    <div class="row">
        <div class="col-md-4 col-md-offset-12">
            <button class="btn btn-primary" id="emp_add_btn">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
            </button>
            <button class="btn btn-danger" id="emp_delete_btn">
                <span class="glyphicon glyphicon-minus" aria-hidden="true"></span>删除
            </button>
        </div>
    </div>
    <%--  用户表格数据  --%>
    <div class="row">
        <table class="table table-hover">
            <%--       表头     --%>
            <thead>
            <tr>
                <th><input type="checkbox" id="checkAll"></th>
                <th>#</th>
                <th>员工姓名</th>
                <th>员工性别</th>
                <th>员工邮箱</th>
                <th>员工部门</th>
                <th>操作</th>
            </tr>
            </thead>
            <%--   列表内容         --%>
            <tbody id="emps_table"></tbody>

        </table>
    </div>
    <%--  分页信息  --%>
    <div class="row">
        <%--            分页文字信息--%>
        <div class="col-md-6 col-md-offset-5" id="page_Info">
        </div>
        <%--            分页条信息--%>
        <div class="col-md-6 col-md-offset-9" id="page_nav_info">

        </div>
    </div>
</div>
<script type="text/javascript">
    var totalPageCount;
    <%--        1、页面加载完成以后，直接发送一个ajax请求，获取分页数据--%>
    $(function () {
        //页面加载完成先跳转第一页
        to_page(1);
    });

    //跳转页面功能
    function to_page(pn) {
        $.ajax({
            url: "${APP_PATH}/emps",
            data: "pn=" + pn,
            type: "GET",
            success: function (result) {
                // console.log(result);
                //1、显示员工表数据
                build_emps_table(result);
                //2、显示分页数据
                build_page_info(result);
                //3、显示分页条数据
                build_page_nav_info(result);
            }
        })
    };

    // 1、解析并显示员工数据
    function build_emps_table(result) {
        //获取数据前先清空
        $("#emps_table").empty();
        //获取所有员工数据
        var emps = result.extend.pageInfo.list;
        //遍历所有员工数据
        $.each(emps, function (index, item) {
            var check = $("<td></td>").append("<input type='checkbox' class='checkitem'>");
            var empId = $("<td></td>").append(item.empId);
            var empName = $("<td></td>").append(item.empName);
            var gender = $("<td></td>").append(item.gender == 'M' ? "男" : "女");
            var empEmail = $("<td></td>").append(item.email);
            var department = $("<td></td>").append(item.department.deptName);
            //添加一个编辑按钮
            var editButton = $("<button></button>").addClass("btn btn-info edit_btn").append("<span></span>")
                .addClass("glyphicon glyphicon-pencil").append("修改");
            //给编辑添加一个属性，可以获取到员工的Id;
            editButton.attr("empId", item.empId);
            //添加一个删除按钮
            var deletButton = $("<button></button>").addClass("btn btn btn-danger delete_btn").append("<span></span>")
                .addClass("glyphicon glyphicon-trash").append("删除");
            deletButton.attr("empId",item.empId);
            var opt = $("<td></td>").append(editButton).append(" ").append(deletButton)
            //定义一个表格行标签
            $("<tr></tr>").append(check)
                .append(empId)
                .append(empName)
                .append(gender)
                .append(empEmail)
                .append(department)
                .append(opt)
                .appendTo("#emps_table") //把员工信息行添加到tbody标签里
        });
    }

    //2、显示分页信息
    function build_page_info(res) {

        //获取数据前先清空
        $("#page_Info").empty();
        $("#page_Info").append("当前处于第" + res.extend.pageInfo.pageNum + "页，总共" +
            res.extend.pageInfo.pages + "页,共" + res.extend.pageInfo.total + "条目数");
    };

    //传递当前页
    var currentPage;

    //3、显示分页条信息
    function build_page_nav_info(res) {
        //传递当前页
        currentPage = res.extend.pageInfo.pageNum;
        //给总记录赋值
        totalPageCount = res.extend.pageInfo.total;
        //获取数据前先清空
        $("#page_nav_info").empty();
        //创建nav标签
        var nav = $("<nav></nav>");
        //创建ul标签
        var ul = $("<ul></ul>").addClass("pagination");
        //首页
        var firstLi = $("<li></li>").append($("<a></a>").attr("href", "#").append("首页"));
        //前一页
        var preLi = $("<li></li>").append($("<a></a>").attr("href", "#").append($("<span></span>").append("&laquo;")));
        //当为第一页时为首页和前一页标签添加不可选中状态
        if (res.extend.pageInfo.pageNum == 1) {
            firstLi.addClass("disabled");
            preLi.addClass("disabled");
        } else {
            firstLi.click(function () {
                to_page(1);
            });
            preLi.click(function () {
                to_page(res.extend.pageInfo.pageNum - 1);
            });
        }
        //后一页
        var nextLi = $("<li></li>").append($("<a></a>").attr("href", "#").append($("<span></span>").append("&raquo;")));
        //末页
        var endLi = $("<li></li>").append($("<a></a>").attr("href", "#").append("末页"));
        //当为最后一页的时为末页和后一页标签添加不可选中状态
        if (res.extend.pageInfo.pageNum == res.extend.pageInfo.pages) {
            nextLi.addClass("disabled");
            endLi.addClass("disabled");
        } else {
            endLi.click(function () {
                to_page(res.extend.pageInfo.pages);
            });
            nextLi.click(function () {
                to_page(res.extend.pageInfo.pageNum + 1);
            });
        }
        //先添加首页前一页分页信息
        ul.append(firstLi).append(preLi);
        $.each(res.extend.pageInfo.navigatepageNums, function (index, item) {
            //每个item代表分页条页码
            var pageNavNum = $("<li></li>").append($("<a></a>").attr("href", "#").append(item));
            //绑定单击事件，进行跳转
            pageNavNum.click(function () {
                to_page(item);
            });
            //为当前页添加高亮
            if (item == res.extend.pageInfo.pageNum) {
                pageNavNum.addClass("active");
            }
            //分页条码添加到ul标签中
            ul.append(pageNavNum);
        })
        //遍历完再添加后一页和末页信息
        ul.append(nextLi).append(endLi);
        //把ul标签添加到nav标签里
        nav.append(ul).appendTo("#page_nav_info");

    }

    function restForm(ele) {
        // 点击新增清空表单内容
        $(ele)[0].reset();
        $(ele).find("*").removeClass("has-error has-success");
        //清空提示信息
        $(ele).find(".help-block").text("");
    }

    //获取部门信息
    function getDepts(ele) {
        //清空下拉列表内容
        $(ele).empty();
        $.ajax({
            url: "${APP_PATH}/depts",
            type: "Get",
            success: function (res) {
                //查看查询到的部门json字符串
                // console.log(res);
                //添加到下拉列表里
                // {"code":100,"ms":"处理成功！","extend":{"depts":[{"deptId":1,"deptName":"学生部"},
                // {"deptId":2,"deptName":"信息部"},{"deptId":3,"deptName":"记者部"},{"deptId":4,"deptName":"实创部"},{"deptId":5,"deptName":"开发部"},{"deptId":6,"deptName":"财务部"}]}}
                $.each(res.extend.depts, function () {
                    var optEle = $("<option></option>").append(this.deptName).attr("value", this.deptId);
                    //将option标签添加到empAddModal下的select标签中
                    //传入ele参数，调用时只需把对应id作为参数即可
                    optEle.appendTo(ele)
                });
            }
        })
    }

    //        点击新增按钮跳出添加模态框
    $("#emp_add_btn").click(function () {
        //完全重置表单内容、样式、类型
        restForm("#emp_add_modal form");
        //弹出模态框之前添加查询部门信息
        getDepts("#emp_add_modal select");
        //弹出模态框
        $("#emp_add_modal").modal({
            //点击周围也不关闭模态框
            backdrop: "static"
        });

        function validate_add_form() {
            //客户端校验表单用户信息
            //获取用户名
            var empName = $("#empName").val();
            //定义一个用户名正则表达式
            var regxName = /(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]{2,5})/;
            if (!regxName.test(empName)) {
                // alert("用户名不合法");
                //给父元素添加错误红框样式
                show_validate_msg("#empNameMsg", "error", "用户名应为字母6到9或中文2到5位组成");
                return false;
            } else {
                show_validate_msg("#empNameMsg", "success", "用户名合法");
            }
            //客户端校验表单邮箱信息
            //获取邮箱信息
            var emEmail = $("#email").val();
            //定义邮箱正则表达式
            var regxEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
            if (!regxEmail.test(emEmail)) {
                show_validate_msg("#empEmailMsg", "error", "邮箱不合法")
                return false;
            } else {
                show_validate_msg("#empEmailMsg", "success", "邮箱合法")
            }
            return true;

        }


        $("#email").change(function () {
            //获取邮箱信息
            var emEmail = $("#email").val();
            //定义邮箱正则表达式
            var regxEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
            if (!regxEmail.test(emEmail)) {
                show_validate_msg("#empEmailMsg", "error", "邮箱不合法");
            } else {
                show_validate_msg("#empEmailMsg", "success", "邮箱合法");
            }
        });

        //这里将校验结果的提示信息全部抽取出来
        function show_validate_msg(ele, status, msg) {
            $(ele).parent().removeClass("has-success has-error");
            $(ele).text("");
            if (status == "success") {
                $(ele).parent().addClass("has-success");
                $(ele).text(msg);
            } else {
                $(ele).parent().addClass("has-error");
                $(ele).text(msg);
            }
        }

        //发送请求到服务器校验表单用户名是否存在
        $("#empName").change(function () {
            //获取填写的用户名信息
            var empName = $("#empName").val();
            ///发送ajax请求验证是否存在该用户名
            $.ajax({
                url: "${APP_PATH}/checkEmpName",
                data: "empName=" + empName,
                type: "POST",
                success: function (res) {
                    if (res.code == 200) {
                        show_validate_msg("#empNameMsg", "error", res.extend.msg);
                        $("#emp_save_btn").attr("ajax_empName", "errorEmp");
                    } else if (res.code == 100) {
                        show_validate_msg("#empNameMsg", "success", "用户名可用");
                        $("#emp_save_btn").attr("ajax_empName", "success");
                    }
                }
            });
        })


        //保存用户数据，给保存按钮绑定一个单击事件
        $("#emp_save_btn").click(function () {
            // alert($("#emp_add_modal form").serialize());
            //1、模态框中填写的表单数据提交给服务器进行保存
            //2、先对要提交给服务器的数据进行校验，
            //3、校验正常发送Ajax请求

            // 客户端校验用户名和邮箱是否合法
            if (!validate_add_form()) {
                return false;
            }
            //客户端发送请求校验用户名是否已经存在
            if ($(this).attr("ajax_empName") == "errorEmp") {
                return false;
            }

            $.ajax({
                url: "${APP_PATH}/emp",
                //rest风格，post为添加用户
                type: "POST",
                data: $("#emp_add_modal form").serialize(),
                success: function (res) {
                    //查看是否添加成功
                    // alert(res.ms);
                    //后台校验是否成功
                    if (res.code == 100) {
                        //添加成功后，关闭模态框
                        $("#emp_add_modal").modal("hide");
                        //然后跳转最后一页
                        //记录一下总记录数，用总记录数充当最后一页，当数字大于总页数，会自动跳转最后一页
                        to_page(totalPageCount);
                    } else {
                        // console.log(res);
                        if (res.extend.errorMap.email != undefined) {
                            show_validate_msg("#empEmailMsg", "error", res.extend.errorMap.email);
                        }
                        if (res.extend.errorMap.empName != undefined) {
                            show_validate_msg("#empEmailMsg", "error", res.extend.errorMap.empName);
                        }
                    }


                }
            });

        });
    });

    /*===========================================================================================*/
    //员工编辑按钮
    //为每个员工的编辑按钮绑定单击事件
    //但是，这里的单击事件是在编辑按钮被创建出来之前就已经开始绑定了，所以这里无法绑定单击事件
    //有两种办法
    //     1）可以在创建按钮的时候就给他绑定单击事件
    //     2）绑定单击.live()，而新版jQuery没有live方法，而是用on进行替代
    function getEmp(id) {
        $.ajax({
            url: "${APP_PATH}/emp/" + id,
            type: "GET",
            success: function (res) {
                // console.log(res);
                //获取员工数据
                //给更新按钮添加一个id属性
                $("#emp_update_btn").attr("empId", id);
                var emp = res.extend.emp;
                //填充员工姓名
                $("#empName_update_name").text(emp.empName);
                //填充员工邮箱
                $("#emp_update_email").val(emp.email);
                //填充员工性别
                $("#emp_update_modal input[name=gender]").val([emp.gender]);
                //填充多选
                $("#emp_update_modal select").val([emp.dId]);
            }
        })
    }

    //点击编辑按钮
    $(document).on("click", ".edit_btn", function () {
        //清空样式
        $("#emp_update_modal form").find("*").removeClass("has-error has-success");
        //清空提示信息
        $("#emp_update_modal form").find(".help-block").text("");
        //2、查出部门信息，并显示部门列表
        getDepts("#update_department");
        // alert("编辑")
        //1、通过edit-id属性查出员工信息，显示员工信息
        getEmp($(this).attr("empId"));

        //弹出模态框
        $("#emp_update_modal").modal({
            //点击周围也不关闭模态框
            backdrop: "static"
        });
    })

    //这里将校验结果的提示信息全部抽取出来
    function show_validate_msg(ele, status, msg) {
        $(ele).parent().removeClass("has-success has-error");
        $(ele).text("");
        if (status == "success") {
            $(ele).parent().addClass("has-success");
            $(ele).text(msg);
        } else {
            $(ele).parent().addClass("has-error");
            $(ele).text(msg);
        }
    }
    var email_update_status;
    //给邮箱绑定一个改变事件
    $("#emp_update_email").change(function () {
        //点击更新之前先判断邮箱是否合法
        //获取邮箱信息
        var emEmail = $("#emp_update_email").val();
        //定义邮箱正则表达式
        var regxEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
        if (!regxEmail.test(emEmail)) {
            show_validate_msg("#emp_Email_Msg", "error", "邮箱不合法");
            email_update_status = false;
        } else {
            show_validate_msg("#emp_Email_Msg", "success", "邮箱合法");
            email_update_status = true;
        }
    });
    //给更行按钮绑定一个单机事件
    $("#emp_update_btn").click(function () {

        //点击更新之前先判断邮箱是否合法
       if (email_update_status == false){
           show_validate_msg("#emp_Email_Msg", "error", "邮箱不合法");
           return false;
       }
        //邮箱验证合法后，发送ajax请求
        $.ajax({
            url: "${APP_PATH}/emp/" + $(this).attr("empId"),
            type: "PUT",
            data: $("#emp_update_modal form").serialize(),//"&_method=PUT",
            success: function (res) {
                // alert(res.ms);
                //关闭模态框
                $("#emp_update_modal").modal('hide');
                //跳转当前页码
                to_page(currentPage);
            }
        });
    });
    /*===========================================================================================*/
    //单个删除
    //为删除绑定一个单击事件
    $(document).on("click",".delete_btn",function () {
        //要删除的id
        var empId = $(this).attr("empId");
        //查找到要删除的用户名字
        var empName = $(this).parents("tr").find("td:eq(2)").text();
        if (confirm("你确定要删除【"+empName+"】用户么？")){
            //点击确认表示删除，发送请求
            $.ajax({
                url:"${APP_PATH}/emp/" + empId,
                type:"DELETE",
                success:function (res) {
                    // alert(res.ms);
                    //删除成后跳转当前页面
                    to_page(currentPage);
                }
            })
        }
    });
    //多个删除
    //   attr获取checked是undefined，因为我们没有定义checked属性，attr获取的是自定义属性值
    //    而我们这些dom原生的属性，可以用prop来获取这些值
    //     alert($(this).prop("checked"));

    //全选/全不选
    $("#checkAll").click(function () {
        //判断当前是否选择全选/全不选
        var flag = $(this).prop("checked");
        $(".checkitem").prop("checked",flag);
    });
    //当本页面所有复选框都选上时，自动将全选复选框选上
   $(document).on("click",".checkitem",function () {
       //选中的项目和当前项目数目相同，则全选，否则不全选
      var isCheckAll =  $(".checkitem:checked").length == $(".checkitem").length;
      $("#checkAll").prop("checked",isCheckAll);
   });
   //批量删除绑定单击事件
    $("#emp_delete_btn").click(function () {

        //获取批量删除的用户名称，并提示
        var empNames = "";
        var emp_id = ""
        $.each($(".checkitem:checked"),function () {
            //每个用户之间用逗号分隔
            empNames += $(this).parents("tr").find("td:eq(2)").text()+ ",";
            emp_id += $(this).parents("tr").find("td:eq(1)").text()+"-";
        });
        //去除最后一个逗号
        empNames = empNames.substring(0,empNames.length-1);
        //去除最后一个-
        emp_id = emp_id.substring(0,emp_id.length-1);
        if (confirm("你确定要删除【"+empNames+"】这些用户么？")){
                //确认删除，发送请求
            $.ajax({
                url:"${APP_PATH}/emp/" +emp_id,
                type:"DELETE",
                success:function (res) {
                    // alert(res.ms);
                    //删除完毕跳转页面
                    to_page(currentPage);
                }
            })
        }
    });


</script>
</body>
</html>